import React, { useState, useRef } from 'react';
import '../index.less';
import Type from './Type';
import Variety from './Variety';
import Specification from './Specification';
import UserType from './UserType';
import AddModel from './AddModel';

const CabinetLock = () => {


  const [isModalOpen, setIsModalOpen] = useState(false);
  const [AddType, setAddType] = useState("");


  const refType = useRef();

  const VarietyRef = useRef();

  const SpecificationRef = useRef();

  const UserTypeRef = useRef();

  // setTimeout(() => { 
  //   console.log(refType.current)
  //   refType.current.Type_GetData();
  // }, 1000);

  return (
    <>
      <div
        style={{
          width: '60%',
          height: '100%',
          display: 'grid',               // 开启 grid
          gridTemplateColumns: '1fr 1fr',// 两列，等宽
          gap: 24,                       // 行间距 & 列间距
        }}
      >
        {/* 第一行 */}
        <div><Type ref={refType} setIsModalOpen={setIsModalOpen} setAddType={setAddType} /></div>
        <div><Variety ref={VarietyRef} setIsModalOpen={setIsModalOpen} setAddType={setAddType} /></div>

        {/* 第二行 */}
        <div><Specification ref={SpecificationRef} setIsModalOpen={setIsModalOpen} setAddType={setAddType} /></div>
        <div><UserType ref={UserTypeRef} setIsModalOpen={setIsModalOpen} setAddType={setAddType} /></div>
      </div>
      <div>{isModalOpen && <AddModel
        TypeUpdate={refType.current.Type_GetData}
        VarietyUpdate={VarietyRef.current.Variety_GetData}
        SpecificationUpdate={SpecificationRef.current.Specification_GetData}
        UserTypeUpdate={UserTypeRef.current.UserType_GetData}
        AddType={AddType}
        isModalOpen={isModalOpen}
        setIsModalOpen={setIsModalOpen}
      />}</div>
    </>
  )
}

export default CabinetLock